<template>
	<div id="signin">
		<div class="cover">
			<div id="leftPanel">
				<div id="leftTop">
					<div class="circle"></div>
                    <div class="circle"></div>
                    <div class="circle"></div>
				</div>	
				<div id="leftBottom">
					 <ul>
                        <li>
                            <i class="fa fa-camera-retro"></i>
                            <span>彩票资讯</span>
                        </li>
                        <li>
                           <i class="fa fa-university" aria-hidden="true"></i>
                            <span>彩票管理</span>
                        </li>
                        <li>
                            <i class="fa fa-cog" aria-hidden="true"></i>
                            <span>彩票工具</span>
                        </li>
                        <li>
                            <i class="fa fa-bar-chart" aria-hidden="true"></i>
                            <span>数据图表</span>
                        </li>
                    </ul>
				</div>
			</div>
			<div id="rightPanel"> 
				<el-form :model="userInfo" :rules="rules" ref="userInfo">
					<ul>
						<li style="font-size:40px;color:white">
                       		 可米彩票
                    	</li>
                    	<li style="width:80%">

                        <el-form-item prop="accountName">
                            <el-input placeholder="请输入用户名" 
                            class="userInput"
                            v-model="userInfo.accountName"
                            />
                        </el-form-item>
                    </li>
                    	<li style="width:80%">
	                        <el-form-item prop="password">
	                            <el-input placeholder="请输入密码"
	                            type="password"
	                            class="userInput"
	                            v-model="userInfo.password"
	                            />
	                        </el-form-item>
                    	</li>
                   	 	<li style="text-align:left;padding-left:0px">
                        	<el-switch
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            v-model="remember"
                        	>
                        	</el-switch>
                        	<span style="color:white;margin-left:10px">记住密码</span>
                    	</li>
                    	<li>
                        	<el-button type="primary" style="width:100%"
                            @click="signin"
                        	>登录</el-button>
                    	</li>
					</ul>
				</el-form>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		data(){
			return {
			userInfo: {
                accountName: 'zmt',
                password: '12345'
            },
				rules: {
					accountName: [
						{required:true,message:'用户名不能为空',trigger:'blur'},
                    	{min:2,max:20,message:'字符不能少于2个字符',trigger:'blur'}
                	],
					password: [
                   	 	{required:true,message:'密码不能为空',trigger:'blur'},
                    	{min:5,max:12,message:'密码不能少于5个字符',trigger:'blur'}
               		]
				},
			remember: true
			}
		},
		methods: {
			signin(){
            	this.$refs['userInfo'].validate((valid) => {
            	if (valid) {
//          		console.log(this.$http);
                	this.$http.post(this.$apis.signIn,this.userInfo)
                	.then((resp)=>{
             
                   	 if(resp.data.success){
                        localStorage.setItem('remember',this.remember);
                        localStorage.setItem('token',resp.data.token);
                        localStorage.setItem('response',JSON.stringify(resp.data.response));
                        // 登录成功跳转到原来想要跳转的页面(组件)
                        if(this.$route.query.redirect){
                            this.$router.push(this.$route.query.redirect);
                        }else{
                            // 如果没有重定向的路径,则默认跳转到Home路径下
                            this.$router.push('/Home')
                        }
                    }else{
                    //登录失败,弹出提示,使用用登录失败
                      this.$message.error('登录失败,请重新登录');
                    }
               		})
           		} else {
                	console.log("还有未通过验证的,请注意");
                	return false;
            	}
            	});
        	}
		}
	}
	
</script>
<style lang="scss">
	#signin {
        width: 100%;
        height: 100%;
        background:url('../../assets/llllgo.jpg') no-repeat;
        background-size: cover;
        .cover {
        	width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display:flex;
            flex-direction:row;
            #leftPanel {
                width: 70%;
                height: 100%;
                #leftTop {
                    width: 100%;
                    height: 70%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    /*background-color: #2C3E50*/
                   .circle {
                        width: 200px;
                        height: 200px;
                        border-radius: 50%;
                        &:nth-child(1){
                            position: absolute;
                            top: 20%;
                            background:rgba(240, 197, 158, 0.3);
                        }
                                                &:nth-child(2){
                            position: absolute;
                            top: 35%;
                            left: 33%;
                            background:rgba(85, 212, 191,0.3);
                        }
                        &:nth-child(3){
                            position: absolute;
                            left: 23%;
                            top: 35%;
                            background:rgba(82, 89, 197,0.3);
                        }
                    }
                }
                #leftBottom {
                    width: 100%;
                    height: 30%;
                    /*background-color: lightcoral*/
                   	ul {
                        width: 100%;
                        height: 100%;
                        display: flex;
                        flex-direction:row;
                        justify-content: center;
                        li {
                            margin-left: 80px;
                            display: flex;
                            flex-direction: column;
                            color: rgba(255, 255, 255, 0.5);
                            span {
                                margin-top:20px;
                                text-align: center;
                            }
                            i {
                                font-size: 60px;
                            }
                        }
                    }
                }    
            }
            #rightPanel{
            	width: 30%;
                height: 100%;
                background: rgba(0,0,0,0.7);
				ul {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    flex-direction: column;
                    align-items: center;
                    li {
                        text-align: center;
                        margin-bottom: 20px;
                        width: 80%;
                        .userInput {
                            width: 100%;
                            text-align: center;
                            .el-input__inner {
                                background:rgba(0,0,0,0);
                                width: 100%;
                            }
                        }
                    }
                    
                }
            }    
        }
    }
</style>